<template>
  <el-card shadow="never">
    <div slot="header" ref="topHeader">
    <el-form :inline="true" :model="listQuery">
        <!-- <el-form-item label="模块:">
          <el-select v-model="listQuery.content" clearable placeholder="请选择模块">
            <el-option v-for="item in moduleOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="具体操作:">
          <el-select v-model="listQuery.handleType" clearable placeholder="请选择具体操作">
            <el-option v-for="item in handleOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" @click="getList">刷新</el-button>
        </el-form-item>
     
      </el-form>
    </div>
    <div>
      <!--table data-->
      <el-table ref="tableCot" v-loading="loading" element-loading-text="请稍后..." :data="tableData" border
                style="width: 100%" :max-height="customTableHeight">
        <el-table-column  type="index" label="序号" width="50" />
        <el-table-column prop="content" label="操作模块"  show-overflow-tooltip />
        <el-table-column prop="handleType" label="具体操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.handleType == '1'">添加</el-tag>
            <el-tag v-if="scope.row.handleType == '2'" type="success">修改</el-tag>
            <el-tag v-if="scope.row.handleType == '3'" type="danger">删除</el-tag>
            <el-tag v-if="scope.row.handleType == '4'" type="warning">批注</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="description" label="操作内容" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-html="scope.row.description"></span>
          </template>
        </el-table-column> -->
        <el-table-column prop="username" label="操作人"  show-overflow-tooltip/>
        <el-table-column prop="ctime" label="操作时间"  show-overflow-tooltip/>
      </el-table>
      <!--分頁-->
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>

    </div>
  </el-card>
</template>
<script>
import Pagination from '@/components/Pagination'
import sysLogApi from '@/api/system/sysLog'

export default {
  name: 'sysLog',
  components: {Pagination},
  data() {
    return {
      loading: false,
      customTableHeight: 200,
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10,
        handleType: null,
        content:null
      },
      tableData: [],
      moduleOptions:[
        {label:'项目管理'},
        {label:'拆迁信息管理'},
        {label:'抵扣信息所有权人'},
      ],
      handleOptions:[
        {label:'添加',value:1},
        {label:'修改',value:2},
        {label:'删除',value:3},
        {label:'登录',value:4},
      ]
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  },
  mounted() {
    this.getList()
    let that = this
    window.onresize = () => {
      //37是box的header的padding，70=(60+10)是顶部的高度
      let tempHeaderHeight = this.$refs.topHeader.offsetHeight + 37 + 95
      let tempHeight = document.body.clientHeight - (106 + tempHeaderHeight)
      if (tempHeight < 300) {
        tempHeight = 300
      }
      that.customTableHeight = tempHeight
    }
    setTimeout(function () {
      const resizeEvent = new Event('resize')
      window.dispatchEvent(resizeEvent)
    }, 100)
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    getList() {
      this.loading = true
      sysLogApi.list(this.listQuery).then(res => {
        this.tableData = res.data || []
        this.total = res.count || 0
        this.loading = false
      }).catch(() => this.loading = false)
    },
    
    // remove(row) {
    //   this.$confirm('确定要删除该条数据吗？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     bigProjectApi.remove(row.id).then(res => {
    //       this.getList()
    //     })
    //   })
    // }, 
  }
}
</script>
<style scoped lang="scss">

</style>
